<template>
  <div>
      <div class="headerMultiple">
          <section>
            <p>该分组共有属性{{page.total}}个</p>
          </section>
          <section>
              <el-button
                  type="primary"
                  @click="addProperty"
              >新增</el-button
              >
          </section>
      </div>

    <section v-show="false">{{ selectCarGruop }} {{ detailId }}</section>

    <el-table
      size="mini"
      v-loading="loading"
      :data="tableData"
      style="width: 100%; margin-top: 10px"
      border
      :header-cell-style="{
        'background-color': '#eeeeee !important',
      }"
    >
      <el-table-column type="index" label="序号" width="60" align="center">
        <template slot-scope="scope">
          <span>{{
            (page.pageNo - 1) * page.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="varName" label="属性名称" width="180px"> </el-table-column>
      <el-table-column prop="varValue" label="属性值" width="100px"> </el-table-column>
      <el-table-column prop="varDescribe" label="属性说明"> </el-table-column>
      <el-table-column label="操作" width="118">
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" @click="edit(scope.row)"
            >修改
          </el-link>
          <el-link type="primary" :underline="false" @click="del(scope.row.id)"
            >删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :page-size="page.pageSize"
      :current-page="page.pageNo"
      layout="total,prev, pager, next"
      :total="page.total"
    >
    </el-pagination>
    <SelectProperty
      ref="selectProperty"
      @getProperty="getProperty"
    ></SelectProperty>
    <div class="editForm-wrapper">
      <el-dialog
        title="修改车辆分组属性值"
        :close-on-click-modal="false"
        v-dialogDrag
        append-to-body
        :visible.sync="visible"
      >
        <el-form
        class="form-container"
          :model="inputForm"
          ref="inputForm"
          v-loading="loading"
          label-width="80px"
        >
          <el-form-item label="属性名称:" prop="names">
            <el-input
              v-model="inputForm.names"
              placeholder=""
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="属性说明:" prop="describes">
            <el-input
              v-model="inputForm.describes"
              placeholder=""
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item
            label="属性值:"
            prop="svalue"
            :rules="[
              { required: true, message: '属性值不能为空', trigger: 'blur' }
            ]"
          >
            <el-input
              v-model="inputForm.svalue"
              placeholder="请填写属性值"
              v-if="
                inputForm.componentType === 4 || inputForm.componentType === 5
              "
            ></el-input>
            <el-select clearable
              v-model="inputForm.svalue"
              v-else
              placeholder="请填写属性值"
            >
              <el-option
                v-for="item in $dictUtils.getDictList(inputForm.dictCode)"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <div class="footer-input adjustButton">
            <el-button type="primary" @click="doSubmit()" v-noMoreClick
              >确定</el-button
            >
            <el-button @click="visible = false">取消</el-button>
          </div>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getGroupProperty,deleteProp,save } from "@/api/truck/truckGroup.js";
import SelectProperty from "./selectProperty";
export default {
  components: {
    SelectProperty,
  },
  data() {
    return {
      page: {
        pageSize: 5,
        pageNo: 1,
        total: 0,
      },
      visible:false,
      inputForm: {
        codes: "",
        dictCode: "",
        componentType: -1,
        describes: "",
        id: "",
        names: "",
        otherUse: "",
        props: "",
        sgroup: "",
        state: "",
        svalue: "",
        tenantAutho: "",
      },
      loading: false,
      tableData: [],
    };
  },
  computed: {
    selectCarGruop () {
      // 选择车辆分组
      this.$store.state.truck.selectCarGruop;
      console.log(this.$store.state.truck.selectCarGruop);
      return this.$store.state.truck.selectCarGruop;
    },
    detailId(val) {
      console.log(this.$store.state.truck.detailId);
      this.getGroupProperty(this.$store.state.truck.detailId, {
        pageSize: 10,
        pageNo: 1,
      });
      return this.$store.state.truck.detailId;
    },
  },
  methods: {
  	handleClose(done) {
		this.$Msg.confirm({
			title:'您确定要关闭吗？',
			content:this.GLOBAL.FORM_CLOSE_TIPS,
			confirmCall:()=>{
				done();
			}
		})
	},
    //属性列表查询
    getGroupProperty(detailId, page) {
      getGroupProperty({
        truckGroupId: detailId,
        pageSize: page.pageSize,
        pageNo: page.pageNo,
      }).then((res) => {
        this.tableData = res.data.result.list;
        this.page.total=res.data.result.count
      });
    },
    //获得属性
    getProperty() {
      this.getGroupProperty(this.$store.state.truck.detailId, {
        pageSize: 10,
        pageNo: 1,
      });
    },
    //触发分页
    handleCurrentChange(e) {
      this.page.pageNo = e;
      this.getGroupProperty(this.$store.state.truck.detailId, this.page);
    },
    handleChangeSize(e) {
      this.page.pageNo = e;
      this.getGroupProperty(this.$store.state.truck.detailId, this.page);
    },

    doSubmit() {
      save({
        truckGroupId: this.$store.state.truck.detailId,
        varSn: this.inputForm.codes,
        varName: this.inputForm.names,
        varDescribe: this.inputForm.describes,
        varValue: this.inputForm.svalue,
        id:this.inputForm.id
      }).then((res) => {
        this.$emit("getProperty", this.inputForm);
      });

      this.visible = false;
      this.dialogVisible = false;
    },
    //打开添加属性
    addProperty() {
      this.$nextTick(() => {
        this.$refs.selectProperty.dialogVisible = true;
      });
    },

    //修改
    edit(row) {
        this.$nextTick(()=>{
            console.log(row)
        this.inputForm.codes=row.varSn
        this.inputForm.names=row.varName
        this.inputForm.describes=row.varDescribe
        this.inputForm.svalue=row.varValue
        this.inputForm.id=row.id
        this.visible=true
        })

    },
    del(id) {
        let that=this;
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
            deleteProp({ids:id}).then((res)=>{
                if (res.data.code==='200') {
                    let detailId=this.detailId
                    let page=this.page
                    this.$message.success("删除成功")
                this.getGroupProperty(detailId,page).then(res=>{
                    console.log('删除成功')

                });
                }


            })

        })

    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
    p{
        margin: 0;
    }
.form-container ::v-deep .el-input__inner {
  width: 320px;
}
.footer-input {
  width: 160px;
  margin: 0 auto;
}
</style>
